<template>
  <view @click="onClick">
    <view
      :userInteractionEnabled="false"
      v-if="!_label && props.vertical"
      :style="[{ backgroundColor: _realColor ? tmcomputed.color : tmcomputed.border }, props.vertical ? { width: props.border + 'rpx', height: props.height + 'rpx' } : '']"
      :class="[props.vertical ? `mx-${props.margin[0]}` : `my-${props.margin[1]}`]"
    ></view>
    <view :userInteractionEnabled="false" v-if="_label && !props.vertical" class="flex flex-row flex-center">
      <view
        :style="[
          tmcomputed
            ? {
                backgroundColor: _realColor ? tmcomputed.color : tmcomputed.border,
                height: props.border + 'rpx',
              }
            : '',
        ]"
        :class="[`my-${props.margin[1]}`, align == 'left' ? 'flex-2' : '', align == 'right' ? 'flex-10' : '', align == 'center' ? 'flex-1' : '']"
      >
      </view>
      <view v-if="props.label" :class="[isDark ? 'opacity-4' : '']">
        <zh-text :fontSize="props.fontSize" :dark="isDark" :followTheme="props.followTheme" :color="props.fontColor" :label="props.label" :_class="['mx-32']"></zh-text>
      </view>
      <view
        :style="[
          tmcomputed
            ? {
                backgroundColor: _realColor ? tmcomputed.color : tmcomputed.border,
                height: props.border + 'rpx',
              }
            : '',
        ]"
        :class="[`my-${props.margin[1]}`, align == 'left' ? 'flex-10' : '', align == 'right' ? 'flex-2' : '', align == 'center' ? 'flex-1' : '']"
      >
      </view>
    </view>
    <view :userInteractionEnabled="false" v-if="!_label && !props.vertical" class="flex flex-row flex-center">
      <view
        class="flex-1"
        :class="[`my-${props.margin[1]}`]"
        :style="[
          tmcomputed
            ? {
                backgroundColor: _realColor ? tmcomputed.color : tmcomputed.border,
                height: props.border + 'rpx',
              }
            : '',
        ]"
      >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 分割线
 * @description 分割线，带文本标签，提供左，中，右文本标签。
 */
import { getCurrentInstance, computed, ref, provide, inject } from 'vue';
import { systemConfigState } from '@/tool/lib/interface';
import { custom_props, computedTheme, computedDark } from '@/tool/lib/minxs';
import systemConfigStore from '@/store/modules/systemConfigStore';
const store = systemConfigStore();
// 混淆props共有参数
const props = defineProps({
  ...custom_props,
  color: {
    type: String,
    default: 'grey-3',
  },
  fontColor: {
    type: String,
    default: 'grey-1',
  },
  fontSize: {
    type: Number,
    default: 26,
  },
  vertical: {
    type: [Boolean],
    default: false,
  },
  height: {
    type: [Number, String],
    default: 26,
  },
  label: {
    type: String,
    default: '',
  },
  align: {
    type: String,
    default: 'center', //left,right,center
  },
  margin: {
    type: Array,
    default: () => [16, 24],
  },
  border: {
    type: [Number],
    default: 1,
  },
  //使用原始颜色为线条色，而不使用计算过的颜色值。
  realColor: {
    type: [Boolean],
    default: false,
  },
});
const emits = defineEmits(['click']);
//线的方向。
const borderDir = computed(() => (props.vertical ? 'left' : 'bottom'));
const _label = computed(() => props.label);
// 设置响应式全局组件库配置表。
const tmcfg = computed<systemConfigState>(() => store);
const _realColor = computed(() => props.realColor);
const isDark = computed(() =>
  computedDark(
    {
      ...props,
      borderDirection: borderDir.value,
    },
    tmcfg.value
  )
);
//计算主题
const tmcomputed = computed(() =>
  computedTheme(
    {
      ...props,
      borderDirection: borderDir.value,
    },
    isDark.value,
    tmcfg.value
  )
);
function onClick(e: any) {
  emits('click', e);
}
</script>

<style></style>
